<template>
  <div class="page-content">
    <div class="page-title">求职者列表</div>
    <div class="content-box">
      <div class="search">
        <div class="search-line clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">手机号码：</span>
            <input
              class="fl"
              type="text"
              placeholder="请输入"
              maxlength="11"
              v-model="searchParams.phone"
            />
          </div>
          <div class="fl clearfix input-box">
            <span class="name fl">姓名：</span>
            <input class="fl" type="text" placeholder="请输入" v-model="searchParams.name" />
          </div>
          <div class="fl clearfix input-box" style="margin-left: 30px;">
            <span class="name fl">专业特长：</span>
            <input class="fl" type="text" placeholder="请输入" v-model="searchParams.major" />
          </div>
          <div class="fl">
            <div class="btn check-btn" @click="searchList">查询</div>
          </div>
        </div>
        <div class="search-line clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">求职状态：</span>
            <a-select
              default-value="请选择"
              :value="searchParams.jobStatus"
              @change="searchListJobState"
            >
              <a-select-option :value="item.value" v-for="item in jobStatus" :key="item.label">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </div>
          <div class="fl clearfix input-box">
            <span class="name fl">性别：</span>
            <a-select
              default-value="请选择"
              :value="searchParams.gender"
              @change="searchListGenders"
            >
              <a-select-option :value="item.value" v-for="item in genders" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </div>
          <div class="fl clearfix input-box" style="margin-left: 30px;">
            <span class="name fl">工作经验：</span>
            <a-select
              default-value="请选择"
              :value="searchParams.experience"
              @change="searchListExperiences"
            >
              <a-select-option :value="item.value" v-for="item in experiences" :key="item.text">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </div>
        </div>
        <div class="search-line clearfix">
          <div class="fl clearfix input-box">
            <span class="name fl">年龄：</span>
            <input
              class="small-input fl"
              type="text"
              placeholder="请输入"
              v-model="searchParams.minAge"
            />
            <span class="line fl">~</span>
            <input
              class="small-input fl"
              type="text"
              placeholder="请输入"
              v-model="searchParams.maxAge"
            />
          </div>
        </div>
      </div>
      <div class="tabel">
        <a-table
          :columns="columns"
          :data-source="list"
          rowKey="account"
          :pagination="pagination"
          @change="handleTableChange"
          :scroll="{ x: 1800 }"
        >
          <span slot="name" slot-scope="record">
            <span>{{ record.name || '-' }}</span>
          </span>
          <span slot="jobStatus" slot-scope="record">
            <span class="state ing-auth" v-if="record.jobStatus == 0">求职中</span>
            <span class="state end-auth" v-if="record.jobStatus == 1">在职</span>
          </span>
          <span slot="age" slot-scope="record">
            <span>{{ record.age || '-' }}</span>
          </span>
          <span slot="genderDes" slot-scope="record">
            <span>{{ record.genderDes || '-' }}</span>
          </span>
          <span slot="idCardNo" slot-scope="record">
            <span>{{ record.idCardNo || '-' }}</span>
          </span>
          <span slot="major" slot-scope="record">
            <span>{{ record.major || '-' }}</span>
          </span>
          <span slot="experienceDes" slot-scope="record">
            <span>{{ record.experienceDes || '-' }}</span>
          </span>
          <span slot="salary" slot-scope="record">
            <span>{{ record.salary || '-' }}</span>
          </span>
          <span slot="jobRequire" slot-scope="record">
            <span>{{ record.jobRequire || '-' }}</span>
          </span>
          <span slot="educationDes" slot-scope="record">
            <span>{{ record.educationDes || '-' }}</span>
          </span>
          <span slot="politicDes" slot-scope="record">
            <span>{{ record.politicDes || '-' }}</span>
          </span>
          <span slot="marriedDes" slot-scope="record">
            <span>{{ record.marriedDes || '-' }}</span>
          </span>
          <span slot="address" slot-scope="record">
            <span>{{ record.address || '-' }}</span>
          </span>
          <!-- slot-scope="text, record" -->
          <span slot="handler" slot-scope="text, record">
            <a class="handler-item" href="javascript:void(0);" @click="toEdit(record)">编辑</a>
            <a class="handler-item" href="javascript:void(0);" @click="resetPsw(record.uid)"
              >重置密码</a
            >
          </span>
        </a-table>
      </div>
    </div>
    <a-modal v-model="visibleModel" destroyOnClose :width="720" title="编辑求职者" @ok="editOk">
      <div class="info">
        <div class="info-detail">
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>手机号码: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                disabled
                maxlength="11"
                :value="editRecordPhone"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>姓名: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.name" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>工作状态: </span>
            </div>
            <div class="word fl">
              <a-radio-group
                :defaultValue="editRecord.jobStatus"
                :options="jobStatus1"
                @change="radioChange"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>身份证号码: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                maxlength="18"
                v-model="editRecord.idCardNo"
                placeholder="请输入"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>年龄: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.age" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>性别: </span>
            </div>
            <div class="word fl">
              <a-select :defaultValue="editRecord.gender || '请选择'" @change="editChangeGender">
                <a-select-option :value="item.value" v-for="item in genders" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>专业特长: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.major" placeholder="请输入" />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <span class="dot">*</span>
              <span>工作经验: </span>
            </div>
            <div class="word fl">
              <a-select
                :defaultValue="editRecord.experienceDes || '请选择'"
                @change="editChangeExperience"
              >
                <a-select-option :value="item.value" v-for="item in experiences" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>月薪要求: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                v-model="editRecord.salary"
                placeholder="请输入，参考格式：3千~5千/月"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>岗位要求: </span>
            </div>
            <div class="word fl">
              <input
                type="text"
                v-model="editRecord.jobRequire"
                placeholder="请输入,如是否不能夜班"
              />
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>文化程度: </span>
            </div>
            <div class="word fl">
              <!-- <div class="tip">代发圣诞节发送的房间阿萨德了法师的加法的</div> -->
              <a-select
                :defaultValue="editRecord.education || '请选择'"
                @change="editChangeEducation"
              >
                <a-select-option :value="item.value" v-for="item in educations" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>政治面貌: </span>
            </div>
            <div class="word fl">
              <!-- <div class="tip">代发圣诞节发送的房间阿萨德了法师的加法的</div> -->
              <a-select :defaultValue="editRecord.politic || '请选择'" @change="editChangePolitic">
                <a-select-option :value="item.value" v-for="item in politics" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>婚姻状况: </span>
            </div>
            <div class="word fl">
              <!-- <div class="tip">代发圣诞节发送的房间阿萨德了法师的加法的</div> -->
              <a-select :defaultValue="editRecord.married || '请选择'" @change="editChangeMarried">
                <a-select-option :value="item.value" v-for="item in marries" :key="item.text">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </div>
          </div>
          <div class="info-item clearfix">
            <div class="front fl">
              <!-- <span class="dot">*</span> -->
              <span>家庭住址: </span>
            </div>
            <div class="word fl">
              <input type="text" v-model="editRecord.address" placeholder="请输入" />
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'center',
    width: 60,
    ellipsis: true,
    fixed: 'left'
  },
  {
    title: '手机号码',
    dataIndex: 'account',
    align: 'center',
    width: 120,
    ellipsis: true,
    fixed: 'left'
  },
  {
    title: '姓名',
    // dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
    align: 'center',
    ellipsis: true,
    width: 100,
    fixed: 'left'
  },
  {
    title: '工作状态',
    // dataIndex: "jobStatusDes",
    scopedSlots: { customRender: 'jobStatus' },
    align: 'center',
    width: 100,
    ellipsis: true,
    fixed: 'left'
  },
  {
    title: '年龄',
    // dataIndex: 'age',
    scopedSlots: { customRender: 'age' },
    width: 60,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '性别',
    // dataIndex: 'genderDes',
    scopedSlots: { customRender: 'genderDes' },
    width: 60,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '身份证号码',
    // dataIndex: 'idCardNo',
    scopedSlots: { customRender: 'idCardNo' },
    width: 200,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '专业特长',
    // dataIndex: 'major',
    scopedSlots: { customRender: 'major' },
    width: 200,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '工作经验',
    // dataIndex: 'experienceDes',
    scopedSlots: { customRender: 'experienceDes' },
    width: 100,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '月薪要求',
    // dataIndex: 'salary',
    scopedSlots: { customRender: 'salary' },
    width: 100,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '岗位要求',
    // dataIndex: 'jobRequire',
    scopedSlots: { customRender: 'jobRequire' },
    width: 100,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '文化程度',
    // dataIndex: 'educationDes',
    scopedSlots: { customRender: 'educationDes' },
    width: 100,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '政治面貌',
    // dataIndex: 'politicDes',
    scopedSlots: { customRender: 'politicDes' },
    width: 100,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '婚姻状况',
    // dataIndex: 'marriedDes',
    scopedSlots: { customRender: 'marriedDes' },
    width: 100,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '家庭住址',
    // dataIndex: 'address',
    scopedSlots: { customRender: 'address' },
    width: 200,
    ellipsis: true,
    align: 'center'
  },
  {
    title: '操作',
    // dataIndex: "handler",
    width: 120,
    align: 'center',
    scopedSlots: { customRender: 'handler' },
    fixed: 'right'
  }
]

export default {
  data() {
    return {
      list: [],
      visibleModel: false,
      jobStatus: [
        { label: '请选择', value: '' },
        { label: '求职中', value: 0 },
        { label: '在职', value: 1 }
      ],
      jobStatus1: [
        { label: '求职中', value: 0 },
        { label: '在职', value: 1 }
      ],
      genders: [],
      experiences: [],
      workTypes: [],
      educations: [],
      politics: [],
      marries: [],
      columns,
      visible: false,
      editRecord: {},
      editRecordPhone: '',
      editRecordUid: '',
      raidoDefaultValue: '',
      pagination: {
        showQuickJumper: true,
        current: 1,
        pageSize: this.$config.pageSize,
        total: 1,
        showTotal: (total, range) =>
          `共 ${total} 条记录 第${Math.ceil(range[0] / this.pagination.pageSize)} / ${Math.ceil(
            total / this.pagination.pageSize
          )} 页`
      },
      searchParams: {
        experience: '',
        gender: '',
        jobStatus: '',
        major: '',
        maxAge: '',
        minAge: '',
        name: '',
        pageNo: 1,
        pageSize: this.$config.pageSize,
        phone: ''
      }
    }
  },
  watch: {
    '$route.path': function(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  },
  mounted() {
    this.init()
    // 获取工作类型
    this.$http.get('/commons/work-types', { params: { isLimit: false } }).then((res) => {
      if (res.success) {
        this.workTypes = res.model.workTypes
      }
    })
    // 获取性别类型
    this.$http.get('/commons/genders', { params: { isLimit: false } }).then((res) => {
      if (res.success) {
        let result = res.model.genders.filter((item) => {
          return item.text !== '不限'
        })
        result.unshift({
          text: '请选择',
          value: ''
        })
        this.genders = result
      }
    })
    // 获取政治面貌列表
    this.$http.get('/commons/politics', { params: { isLimit: false } }).then((res) => {
      if (res.success) {
        this.politics = res.model.politics
        this.politics.unshift({
          text: '请选择',
          value: ''
        })
      }
    })
    // 获取教育程度列表
    this.$http.get('/commons/educations', { params: { isLimit: false } }).then((res) => {
      if (res.success) {
        this.educations = res.model.educations
        this.educations.unshift({
          text: '请选择',
          value: ''
        })
      }
    })
    // 获取经验列表
    this.$http.get('/commons/experiences', { params: { isLimit: false } }).then((res) => {
      if (res.success) {
        let result = res.model.experiences
        result.unshift({
          text: '请选择',
          value: ''
        })
        this.experiences = result
      }
    })
    // 获取结婚情况列表
    this.$http.get('/commons/marries', { params: { isLimit: false } }).then((res) => {
      if (res.success) {
        this.marries = res.model.marries
        this.marries.unshift({
          text: '请选择',
          value: ''
        })
      }
    })
  },
  methods: {
    init() {
      this.searchParams.experience = ''
      this.searchParams.gender = ''
      this.searchParams.jobStatus = ''
      this.searchParams.major = ''
      this.searchParams.maxAge = ''
      this.searchParams.minAge = ''
      this.searchParams.name = ''
      this.searchParams.phone = ''
      this.searchParams.pageNo = ''
      this.searchParams.pageSize = this.$config.pageSize
      this.getList()
    },
    getList() {
      this.$http
        .get('/platforms/users', {
          params: this.searchParams
        })
        .then((res) => {
          if (res.success) {
            this.pagination.current = res.model.pageNo
            this.pagination.total = res.model.totalCount
            this.list = res.model.data.map((item, index) => {
              item.no = index + 1
              return item
            })
          } else {
            this.$message.error(res.message)
          }
        })
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.searchParams.pageNo = pagination.current
      this.getList()
    },
    searchList() {
      this.searchParams.pageNo = 1
      this.getList()
    },
    searchListJobState(value) {
      this.searchParams.pageNo = 1
      this.searchParams.jobStatus = value
      this.getList()
    },
    searchListGenders(value) {
      this.searchParams.pageNo = 1
      this.searchParams.gender = value
      this.getList()
    },
    searchListExperiences(value) {
      this.searchParams.pageNo = 1
      this.searchParams.experience = value
      this.getList()
    },
    // 重置密码
    resetPsw(uid) {
      const self = this
      this.$confirm({
        title: '提示',
        content: '确认将密码重置为111111？',
        onOk: () => {
          self.$http.put('/platforms/users/' + uid + '/passwords?password=111111').then((res) => {
            if (res.success) {
              this.$message.success('重置成功')
            } else {
              this.$message.error('重置失败')
            }
          })
        }
      })
    },
    editChangeGender(value) {
      this.editRecord.gender = value
    },
    editChangeEducation(value) {
      this.editRecord.education = value
    },
    editChangePolitic(value) {
      this.editRecord.politic = value
    },
    editChangeMarried(value) {
      this.editRecord.married = value
    },
    editChangeExperience(value) {
      this.editRecord.experience = value
    },
    // 编辑
    toEdit(editRecord) {
      console.log(editRecord)
      this.editRecordUid = editRecord.uid
      this.raidoDefaultValue = editRecord.jobStatus
      this.editRecordPhone = editRecord.account
      this.editRecord.address = editRecord.address
      this.editRecord.age = editRecord.age
      this.editRecord.experience = editRecord.experience
      this.editRecord.experienceDes = editRecord.experienceDes
      this.editRecord.education = editRecord.education
      this.editRecord.educationDes = editRecord.educationDes
      this.editRecord.genderDes = editRecord.genderDes
      this.editRecord.gender = editRecord.gender
      this.editRecord.idCardNo = editRecord.idCardNo
      this.editRecord.jobRequire = editRecord.jobRequire
      this.editRecord.jobStatus = editRecord.jobStatus
      this.editRecord.major = editRecord.major
      this.editRecord.marriedDes = editRecord.marriedDes
      this.editRecord.married = editRecord.married
      this.editRecord.name = editRecord.name
      this.editRecord.politicDes = editRecord.politicDes
      this.editRecord.politic = editRecord.politic
      this.editRecord.salary = editRecord.salary
      this.visibleModel = true
    },
    radioChange(res) {
      this.editRecord.jobStatus = res.target.value
    },
    checkEdit() {
      console.log(this.editRecord)
      if (!checkFormat.isCName(this.editRecord.name, 5)) {
        this.$message.error('请输入2-5个字的中文名字')
        return false
      }
      if (!this.editRecord.idCardNo) {
        this.$message.error('请输入身份证号码')
        return false
      }
      if (!/^\+?[1-9][0-9]*$/.test(this.editRecord.age)) {
        this.$message.error('请输入正确的年龄')
        return false
      }
      if (!this.editRecord.major) {
        this.$message.error('请输入专业特长')
        return false
      }
      return true
    },
    editOk() {
      if (this.checkEdit()) {
        this.$http
          .put('/platforms/users/' + this.editRecordUid, this.editRecord)
          .then((res) => {
            if (res.success) {
              this.visibleModel = false
              this.$message.success('编辑保存成功')
              this.getList()
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(() => {
            this.$message.error('编辑保存失败')
          })
      }
    }
  }
}
</script>

<style lang="less">
.ant-table td {
  white-space: nowrap;
}
</style>
